﻿<%@ Page Title="" Language="C#" MasterPageFile="~/New.Master" AutoEventWireup="true" CodeBehind="Chat.aspx.cs" Inherits="Client.WebForm1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" src="Styles/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
  <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
  <script src="Scripts/addon.js"></script>
  
  
<script>

    $(function () {
        var array;
        var direction;
        var from;
        var to;
        var sapxep = 0;
        var loc = 0;
        $("#labeldi").hide();
        $("#control").hide();
        $("#labelve").hide();
        $("#loadingImage").hide();

        var URL = 'http://localhost:18796/api/values/';
        var availableTags = [
      "Buôn Ma Thuột (BMV)",
      "Cà Mau (CAH)",
      "Côn Đảo (VCS)",
      "Cần Thơ (VCA)",
      "Huế (HUI)",
      "Hà Nội (HAN)",
      "Hải Phòng (HPH)",
      "Nha Trang (NHA)",
      "Phú Quốc (PQC)",
      "Pleiku (PXU)",
      "Quy Nhơn (UIH)",
      "Rạch Giá (VKG)",
      "Tam Kỳ (VCL)",
      "Tp Hồ Chí Minh (SGN)",
      "Tuy Hòa (TBB)",
      "Vinh (VII)",
      "Điện Biên (DIN)"
      , "Đà Lạt (DLI)",
      "Đà Nẵng (DAD)",
      "Đồng Hới (VDH)"
      ];
        $(function () {
            $("#radio").buttonset();
        });
        $('#placestart').autocomplete({
            source: availableTags
        });
        $('#placeend').autocomplete({
            source: availableTags
        });
        $("#datestart").datepicker({
            dateFormat: "dd/mm/yy",
            numberOfMonths: 2,
            minDate: 0,
            showButtonPanel: true,
            onClose: function (selectedDate) {
                $("#dateend").datepicker("option", "minDate", selectedDate);
            }
        });
        $("#dateend").datepicker({

            dateFormat: "dd/mm/yy",
            changeMonth: true,
            numberOfMonths: 2,
            minDate: 0,
            showButtonPanel: true

        });
        $("#SearchFlight")
        .button()
        .click(function () {
            Search();
        })

        function Search() {
            $('#labeldi').empty();
            $('#labelve').empty();
            $('#tabledi').empty();
            $('#tableve').empty();

            from = $("#placestart").val();
            to = $("#placeend").val();
            var dayfrom = $("#datestart").val();
            var dayto = $("#dateend").val();


            if (radio1.checked == true) {
                direction = 1;
                dayto = "";
                if (from == "" || to == "" || dayfrom == "") {
                    alert("Chưa điền đầy đủ thông tin !");
                    return;
                }
            }
            else {
                direction = 2;
                if (from == "" || to == "" || dayfrom == "" || dayto == "") {
                    alert("Chưa điền đầy đủ thông tin !");
                    return;
                }
            }
            $("#loadingImage").show();
            $('#labeldi').append(
                       "<p>Từ <span style='color:blue;font-weight:bold'>" + from +
                       "</span> đi <span style='color:blue;font-weight:bold'>" + to +
                       "</span> ngày <span style='color:blue;font-weight:bold'>" + dayfrom + "</span></p>"
                    );
            if (direction == 2) {
                $('#labelve').append(
                       "<p>Từ <span style='color:blue;font-weight:bold'>" + to +
                       "</span> đi <span style='color:blue;font-weight:bold'>" + from +
                       "</span> ngày <span style='color:blue;font-weight:bold'>" + dayto + "</span></p>"
                    );
            }
            from = XulyChuoi(from);
            to = XulyChuoi(to);

            jQuery.support.cors = true;
            $.ajax({
                url: URL + '?direction=' + direction + '&from=' + from + '&to=' + to + '&dayfrom=' + dayfrom + '&dayto=' + dayto,
                type: 'GET',
                datatype: 'json',
                success: function (data) {
                    $("#labeldi").show();
                    $("#labelve").show();
                    $("#loadingImage").hide();
                    $("#control").show();
                    array = data;

                    $("#tabledi").append(
                       "    <table id='di' style='width:100%;' border='1'>" +
                        "        <tr>" +
                        "             <td align='center' bgcolor='#996633' class='style4' width='20%'>" +
                        "                Logo</td>" +
                        "            <td align='center' bgcolor='#996633' class='style4' width='15%'>" +
                        "                Bay</td>" +
                        "            <td align='center' bgcolor='#996633' class='style4' width='15%'>" +
                        "                Đến Nơi</td>" +
                        "            <td align='center' bgcolor='#996633' class='style4' width='25%'>" +
                        "                Giá Tiền</td>" +
                         "           <td align='center' bgcolor='#996633' class='style4' width='25%'>" +
                         "               Hãng</td>" +
                         "       </tr>   " +
                        "    </table>  "
                        );
                    if (direction == 2) {
                        $("#tableve").append(
                       "    <table id='ve' style='width:100%;' border='1'>" +
                        "        <tr>" +
                        "             <td align='center' bgcolor='#996633' class='style4' width='20%'>" +
                        "                Logo</td>" +
                        "            <td align='center' bgcolor='#996633' class='style4' width='15%'>" +
                        "                Bay</td>" +
                        "            <td align='center' bgcolor='#996633' class='style4' width='15%'>" +
                        "                Đến Nơi</td>" +
                        "            <td align='center' bgcolor='#996633' class='style4' width='25%'>" +
                        "                Giá Tiền</td>" +
                         "           <td align='center' bgcolor='#996633' class='style4' width='25%'>" +
                         "               Hãng</td>" +
                         "       </tr>   " +
                        "    </table>  "
                        );
                    }
                    for (var i = 0; i < data.length; i++) {
                        var temp = data[i].From;

                        if (temp.search(from) != -1) {

                            TableAdd(data[i], true);
                        }
                        else {

                            TableAdd(data[i], false);
                        }
                    }
                },
                error: function () {
                    alert("Please try again !");
                }
            });
        }
        function TableAdd(value, dk) {
            var temp = "<tr>" +
                                                    " <td align='center' width='20%'> <img height='82px' width='116' src='" + value.Image + "'/>" +
                                                      "      </td>" +
                                                     "   <td align='center' width='15%'>" + value.TimeFrom +
                                                     "       </td>" +
                                                     "   <td align='center' width='15%'>" + value.TimeTo +
                                                      "     </td>" +
                                                    "    <td align='center' width='25%'>" + value.GiaTien +
                                                    "        </td>" +
                                                       " <td align='center' width='25%'>" + value.Hang +
                                                      "      </td>" +

                                                   " </tr> ";
            if (dk == true) {
                $("#di").append(temp);
            }
            else {
                $("#ve").append(temp);
            }
        }
        function XulyChuoi(temp) {
            var text;
            var a = temp.split("(");
            text = a[1].replace(')', '');

            return text;
        }
        function TheHien(newloc) {
            loc = newloc;
            if (loc != 0) {

                for (var i = 0; i < array.length; i++) {

                    var t = array[i].From;
                    if (array[i].Hang == loc) {
                        if (t.search(from) != -1) {
                            TableAdd(array[i], true);
                        }
                        else {
                            TableAdd(array[i], false);
                        }
                    }
                }
            }
            else {
                for (var i = 0; i < array.length; i++) {

                    var t = array[i].From;

                    if (t.search(from) != -1) {
                        TableAdd(array[i], true);
                    }
                    else {
                        TableAdd(array[i], false);
                    }

                }
            }
        }
        $('#sort').change(function () {
            //1 tang gian
            //2 giam dan
            var tittle = " <tr>" +
                        "             <td align='center' bgcolor='#996633' class='style4' width='20%'>" +
                        "                Logo</td>" +
                        "            <td align='center' bgcolor='#996633' class='style4' width='15%'>" +
                        "                Bay</td>" +
                        "            <td align='center' bgcolor='#996633' class='style4' width='15%'>" +
                        "                Đến Nơi</td>" +
                        "            <td align='center' bgcolor='#996633' class='style4' width='25%'>" +
                        "                Giá Tiền</td>" +
                         "           <td align='center' bgcolor='#996633' class='style4' width='25%'>" +
                         "               Hãng</td>" +
                         "       </tr>   ";
            var type = $(this).val();
            sapxep = type;
            $("#di").empty();
            $("#di").append(tittle);
            if (direction == 2) {
                $("#ve").empty();
                $("#ve").append(tittle);
            }
            if (type == 1) {
                for (var i = 0; i < array.length - 1; i++) {
                    for (var j = i + 1; j < array.length; j++) {
                        var ai = array[i].GiaTien.split(".");
                        var aj = array[j].GiaTien.split(".");

                        if (ai.length < aj.length) {

                        }
                        if (ai.length == aj.length) {

                            if (ai[0] > aj[0]) {

                                var flag = array[i];
                                array[i] = array[j];
                                array[j] = flag;

                            }

                            if (ai[0] == aj[0]) {

                                if (ai[1] > aj[1]) {

                                    var flag = array[i];
                                    array[i] = array[j];
                                    array[j] = flag;

                                }
                            }
                        }
                        if (ai.length > aj.length) {

                            var flag = array[i];
                            array[i] = array[j];
                            array[j] = flag;

                        }
                    }
                }
                TheHien(loc);
            }
            if (type == 2) {
                for (var i = 0; i < array.length - 1; i++) {
                    for (var j = i + 1; j < array.length; j++) {
                        var ai = array[i].GiaTien.split(".");
                        var aj = array[j].GiaTien.split(".");

                        if (ai.length > aj.length) {

                        }
                        if (ai.length == aj.length) {

                            if (ai[0] < aj[0]) {

                                var flag = array[i];
                                array[i] = array[j];
                                array[j] = flag;

                            }

                            if (ai[0] == aj[0]) {

                                if (ai[1] < aj[1]) {

                                    var flag = array[i];
                                    array[i] = array[j];
                                    array[j] = flag;

                                }
                            }
                        }
                        if (ai.length < aj.length) {

                            var flag = array[i];
                            array[i] = array[j];
                            array[j] = flag;

                        }
                    }
                }
                TheHien(loc);
            }
        });
        $('#filter').change(function () {

            var tittle = " <tr>" +
                        "             <td align='center' bgcolor='#996633' class='style4' width='20%'>" +
                        "                Logo</td>" +
                        "            <td align='center' bgcolor='#996633' class='style4' width='15%'>" +
                        "                Bay</td>" +
                        "            <td align='center' bgcolor='#996633' class='style4' width='15%'>" +
                        "                Đến Nơi</td>" +
                        "            <td align='center' bgcolor='#996633' class='style4' width='25%'>" +
                        "                Giá Tiền</td>" +
                         "           <td align='center' bgcolor='#996633' class='style4' width='25%'>" +
                         "               Hãng</td>" +
                         "       </tr>   ";
            var type = $(this).val();
            //loc = type;
            $("#di").empty();
            $("#di").append(tittle);
            if (direction == 2) {
                $("#ve").empty();
                $("#ve").append(tittle);
            }

            TheHien(type);

        });
    });
    
</script>
    </asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div style="background-color:Transparent;width:640px">
    <table style="width:100%;">
        <tr>
            <td align="center" width="33%">
                <a href="https://booking.airmekong.com.vn/ScheduleSelect.aspx"><img alt="" src="Image/logoAirMekong.jpg" style="width: 200px" /></a>
                </td>
            <td align="center" width="33%">
               <a href="http://www.jetstar.com/vn/vi/home"> <img alt="" src="Image/logoJetStart.png" style="width: 200px" /></td> </a>
            <td align="center" width="33%">
                <a href="http://www.vietnamairlines.com/wps/portal/vn/site/home?lang=vn&country=vietnam&country_code=VN"><img alt="" src="Image/logoVietnamAirlines.gif" 
                    style="width: 200px; height: 58px;" /> </a></td>
        </tr>
      
       
    </table>
</div>
    <div class="hentry" style="background-color:Transparent;width:640px">
    
    <div class="search-box" style="height:auto">
        <div id="radio">
            <input type="radio" id="radio1" name="radio" value="1" checked="checked"/><label for="radio1">Một Chiều</label>
            <input type="radio" id="radio2" name="radio" value="2"/><label for="radio2">Khứ Hồi</label>
        </div>  
        <table  style="width:100%;">
           
            <tr>
                <td width="50%">
                    <b>Nơi đi :&nbsp;&nbsp;&nbsp; </b>
                    <input id="placestart" style="width: 211px; height: 24px" type="text" /></td>
                <td width="50%">
                    <b>Nơi đến :&nbsp; </b>
                    <input id="placeend" style="width: 211px; height: 24px" type="text" /></td>
            </tr>
            <tr>
                <td width="50%">
                    <b>Ngày đi : </b>
                    <input id="datestart" style="width: 211px; height: 24px" type="text" /></td>
                <td width="50%">
                    <b>Ngày về :&nbsp; </b>
                    <input id="dateend" style="width: 211px; height: 24px" type="text" /></td>
            </tr>
            <tr>
                <td width="50%">
                    &nbsp;</td>
                <td align="center" width="50%">
                    <input id="SearchFlight" type="button" value="Tìm Chuyến Bay" /></td>
            </tr>
        </table>
        
    </div>
    <div  style="height:auto;padding-top:20px;padding-bottom:20px">
        <div id="loadingImage" style="padding-bottom:20px">
          loading...  <img src="../../Image/loading.gif" />
        </div>
        <div id="control" style="padding-bottom:20px">
            <div style="float:right;width:40%">
                <select id="sort">
                    <option value="0">- Chọn cách sắp xếp -</option>
                    <option value="1">Sắp xếp giá vé tăng dần</option>
                    <option value="2">Sắp xếp giá vé giảm dần</option>
                </select>
            </div>
            <div  style="float:right;width:40%">
                <select id="filter">
                    <option value="0">Hiển Thị Tất Cả Các Hãng</option>
                    <option value="Jet Star">Jet Star</option>
                    <option value="VietName Airlines">Vietnam Airlines</option>
                    <option value="Mekong Air">Air Mekong</option>
                </select>
            </div>
        </div>
       <div id="labeldi"></div>
        <div id="tabledi"></div> 
           
    </div>
    <div  style="height:auto;padding-top:20px;padding-bottom:20px">
        <div id="labelve"></div>
        <div id="tableve"></div> 
    </div>
</div>
</asp:Content>
